<template>
  <footer class="shop-cart">
    <section class="top" v-show="isOpen">
      <section class="blank" @click="handleShutCart"></section>
      <section class="cart">
        <div class="title">
          <span class="name">购物车</span>
          <span class="empty" @click="handleEmptyCart">
            <svg class="svg">
              <use xlink:href="#empty"></use>
            </svg>
            清空</span
          >
        </div>
        <div class="goods">
          <div
            v-for="(item, index) in selectItem"
            class="good"
            v-if="item.count"
          >
            <span class="item-left">
              <span class="name">{{ item.name }}</span>
              <span class="specs-name">{{ item.specs_name }}</span>
            </span>
            <span class="item-right">
              <span class="item-price">¥{{ item.price }}</span>
              <shop-bolt
                :food_id="item.id"
                :restaurant_id="item.restaurant_id"
                :category_id="item.category_id"
                :item_id="item.item_id"
                class="bolt"
                @handleReduceCartGoods="handleReduceCartGoods"
              />
            </span>
          </div>
        </div>
      </section>
    </section>
    <section class="bottom">
      <section class="left" @click="handleOpenCart">
        <svg
          class="svg"
          :style="{
            'background-color': isShowText ? '#3d3d3f' : '#3190e8',
            'z-index': currentIndex === 0 ? '1' : '0',
          }"
        >
          <use xlink:href="#cart" />
        </svg>
        <div class="price-sum">
          <div class="price">¥ {{ fullPrice.toFixed(2) }}</div>
          <div class="distribution">配送费¥{{ cartData.fee }}</div>
        </div>
      </section>
      <section class="right" :class="{ satisfy: !isShowText }">
        <span v-show="isShowText"
          >还差¥{{ cartData.amount - fullPrice }}起送</span
        >
        <span v-show="!isShowText" @click="handleSkipConfirmOrder">去计算</span>
      </section>
    </section>
  </footer>
</template>

<script>
import { EMPTY_GOODS_COUNT } from "store/mutations.type";

import ShopBolt from "./childComps/childComps/ShopBolt";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      cartData: {},
      selectItem: [],
      isOpen: false,
      isShowText: true,
      fullPrice: 0, //总的价格,
      currentIndex: 0, //决定购物车是否显示
      currentStore: [],
    };
  },
  props: {
    restaurantId: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    ...mapGetters(["goods", "geohash"]),
  },
  created() {
    this.$bus.$on("handleCartData", (res) => {
      this.cartData = res;
    });
    this.handleErgodic();
  },
  watch: {
    goods() {
      // 总的价格
      // this.handleErgodic();
      this.currentStore = this.goods[this.restaurantId];
      this.handleErgodic();
    },
    restaurantId(value) {
      this.currentStore = this.goods[this.restaurantId];
      this.handleErgodic();
    },
  },
  mounted() {
    this.$bus.$on("handleControlSwitch", (index) => {
      this.currentIndex = index;
    });
  },
  destroyed() {
    this.$bus.$emit("handleSkipConfirmOrder", this.selectItem);
  },
  methods: {
    handleOpenCart() {
      this.handleErgodic();
      this.handleCloseCart("open");
    },
    handleErgodic() {
      const selectItem = [];
      function ergodic(obj) {
        for (const key in obj) {
          obj[key].id ? selectItem.push(obj[key]) : ergodic(obj[key]);
        }
      }
      ergodic(this.currentStore);
      this.selectItem = selectItem;
      this.fullPrice = this.selectItem.reduce(
        (pre, val) => (pre += val.price * val.count),
        0
      );
      this.isShowText = this.fullPrice >= 20 ? false : true;
    },
    handleShutCart() {
      this.isOpen = false;
    },
    handleReduceCartGoods() {
      this.handleCloseCart("reduce");
    },
    handleCloseCart(value) {
      let num = 0;
      for (const key in this.selectItem) {
        this.selectItem[key].count === 0 ? num++ : "";
      }
      this.isOpen =
        num === this.selectItem.length
          ? false
          : value === "open"
          ? !this.isOpen
          : true;
    },
    handleEmptyCart() {
      this.$store.commit(EMPTY_GOODS_COUNT);
      this.isOpen = false;
    },
    handleSkipConfirmOrder() {
      this.$router.push({
        path: "/confirmOrder",
        query: { geohash: this.geohash, id: this.selectItem[0].restaurant_id },
      });
    },
  },
  components: {
    ShopBolt,
  },
};
</script>
<style lang="less" scoped>
.shop-cart {
  .top {
    .blank {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(61, 61, 63, 0.6);
    }
    .cart {
      position: absolute;
      right: 0;
      bottom: 46px;
      left: 0;
      .title {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: #eceff1;
        color: #666666;
        opacity: 1;
        .empty {
          position: relative;
          font-size: 14px;
          .svg {
            position: absolute;
            top: -5px;
            left: -25px;
            width: 30px;
            height: 30px;
          }
        }
      }
      .goods {
        background-color: #fff;
        .good {
          display: flex;
          padding: 10px;
          align-items: center;
          .item-left {
            width: 50%;
            font-weight: 700;
            color: #666666;
            .specs-name {
              display: block;
              font-size: 8px;
              color: #bfbea6;
            }
          }
          .item-right {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 50%;
            padding-left: 50px;
            .item-price {
              font-weight: 700;
              color: #ff6600;
            }
          }
        }
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    height: 46px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #3d3d3f;
    color: #fff;
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      .svg {
        margin: -20px 15px 0 20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #3d3d3f;
      }
      .price {
        margin-bottom: 3px;
        font-weight: 700;
        font-size: 20px;
      }
      .distribution {
        font-weight: 300;
        font-size: 9px;
      }
    }
    .right {
      width: 120px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      padding: 0 12px;
      background-color: #535356;
      font-weight: 700;
    }
    .satisfy {
      background-color: #4cd964;
      color: #fff;
    }
  }
}
</style>